<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>

<form:form commandName="taskNew" cssClass="form-horizontal" role="form" onsubmit="return false;">
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="taskName">
            <a style="color: red">*</a>任务名称
        </label>
        <div class="col-sm-8">
            <input type="text" name="taskName" id="taskName" placeholder="任务名称" value="${taskNew.taskName}"
                   class="form-control required">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="content">任务内容</label>
        <div class="col-sm-8">
            <textarea rows="5" id="content" name="content" placeholder="任务内容" value="${taskNew.content}"
                      class="form-control"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="taskName">抄送领导</label>
        <div class="col-sm-8 ">
            <select multiple id="e1" name="copeIdList">
                <option></option>
            </select>
            <div id="e2" style="display: none">
                <input type="hidden" value="" name="">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right">任务附件</label>
        <div class="col-sm-6">
            <input type="file" id="fileupload" name="files" class="form-control">
        </div>
        <div class="col-sm-2">
            <input type="button" value="上传" id="btn-upload" style="width: 100%; height: 32px;"
                   class="btn-large btn-primary"/>
            <input type="text" name="file" id="file" value="${taskNew.file}" class="form-control "
                   style="display: none"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="dateTime"><a style="color: red">*</a>任务时限</label>
        <div class="col-sm-3">
            <input type="number" name="dateTime" id="dateTime" placeholder="任务时限" value="${taskNew.dateTime}"
                   class="form-control  required"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="operatorId"><a style="color: red">*</a>督查人</label>
        <div class="col-sm-3">
            <select name="operatorId" id="operatorId" class="form-control required" onchange="changeOperator(this)">
                <option value="">点击选择</option>
            </select>
            <input type="hidden" name="operator" id="operator" value="${taskNew.operator}">
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="operatorTel"><a
                style="color: red">*</a>督查人电话</label>
        <div class="col-sm-3">
            <input type="text" name="operatorTel" id="operatorTel" placeholder="督查人电话" value="${taskNew.operatorTel}"
                   class="form-control required" maxlength="11">
        </div>
    </div>
    <div class="form-group" <%--style="position: relative;"--%>>
        <label class="col-sm-2 control-label no-padding-right" for="referenceNumber">文号</label>
        <div class="col-sm-3">
            <input type="text" name="referenceNumber" id="referenceNumber" placeholder="文号"
                   value="${taskNew.referenceNumber}"
                   class="form-control">
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="categoryId"><a style="color: red">*</a>事项类型</label>
        <div class="col-sm-3">
            <select name="categoryId" id="categoryId" class="form-control required" onchange="changeCategory(this)">
                <option value="">点击选择</option>
                <option value="01" <c:if test="${taskNew.categoryId == '01'}">selected="selected"</c:if>>会议纪要</option>
                <option value="02" <c:if test="${taskNew.categoryId == '02'}">selected="selected"</c:if>>省市县为民办实事
                </option>
                <option value="03" <c:if test="${taskNew.categoryId == '03'}">selected="selected"</c:if>>省市县政府工作报告
                </option>
                <option value="04" <c:if test="${taskNew.categoryId == '04'}">selected="selected"</c:if>>政协提案办理</option>
                <option value="05" <c:if test="${taskNew.categoryId == '05'}">selected="selected"</c:if>>县长批示件</option>
                <option value="06" <c:if test="${taskNew.categoryId == '06'}">selected="selected"</c:if>>人大建议办理</option>
                <option value="06" <c:if test="${taskNew.categoryId == '07'}">selected="selected"</c:if>>文件办理告知单
                </option>
                <option value="06" <c:if test="${taskNew.categoryId == '08'}">selected="selected"</c:if>>县委交办事项</option>
                <option value="07" <c:if test="${taskNew.categoryId == '09'}">selected="selected"</c:if>>其他事项</option>
            </select>
        </div>
        <div class="col-sm-1">
            <input type="button" value="添加" style="display: none;" id="addDepart" onclick="addDeparts()"
                   class="btn-sm btn-success"/>
        </div>
    </div>
    <%--议题或承办单位内容DIV--%>
    <div id="departContent"></div>

    <form:hidden path="sysId"/>

</form:form>
<script src="<s:url value="/assets/js/chosen.jquery.js"></s:url>"></script>
<script src="<s:url value="/assets/js/ajaxfileupload.js"></s:url>"></script>
<script src="<s:url value="/assets/js/modal/modal.js"></s:url>"></script>

<script type="text/javascript">
    jQuery(function ($) {
        $('.date-picker').datepicker({
            inline: true,
            format: "yyyy-mm-dd",
            autoclose: true,
            todayHighlight: true,
            language: 'cn'
        })
        //show datepicker when clicking on the icon
            .next().on(ace.click_event, function () {
            $(this).prev().focus();
        });

        // 获取承办单位
        getDepartCategory();

        // 获取督查人信息
        getOperator();
    });

    // 督查人手机号Map
    var mobileMap = new Map();

    /**
     * 获取督查人信息
     */
    function getOperator() {
        $.ajax({
            type: "post",
            url: '/project/queryByDeptId',
            dataType: "json",
            success: function (data) {
                console.log(data);
                if (data == undefined || data == null) {
                    console.log("获取督查人信息为空");
                    return;
                }
                var operatorOption = '';
                for (var i = 0; i < data.length; i++) {
                    var name = data[i].name;
                    var sysId = data[i].sysId;
                    var mobile = data[i].mobile;
                    operatorOption += '<option value="' + sysId + '">' + name + '</option>';
                    mobileMap.set(sysId, mobile);
                }
                // 这么写是因为在查询页也有一个相同的id,查询页是隐藏的
                $('#taskNew #operatorId').append(operatorOption);
            },
            error: function (jqXHR) {
                console.log("获取督查人信息失败");
            }
        });
    }

    /**
     * 回填督查人电话
     */
    function changeOperator(obj) {
        var operatorName = $(obj).find("option:selected").text();
        if (operatorName == "点击选择") {
            $(obj).siblings("input").val('');
            $('#taskNew #operatorTel').val('');
        } else {
            $(obj).siblings("input").val(operatorName);
            var operatorId = $(obj).val();
            var mobile = mobileMap.get(operatorId);
            $('#taskNew #operatorTel').val(mobile);
        }
    }

    // 承办单位分类option字符串
    var departCategoryOption = '<option value="">点击选择</option>';

    /**
     * 获取单位分类
     */
    function getDepartCategory() {
        $.ajax({
            type: "post",
            url: getUrl("deptList"),
            dataType: "json",
            success: function (data) {
                if (data == undefined || data == null) {
                    console.log("获取承办单位为空");
                    return;
                }
                for (var i = 0; i < data.length; i++) {
                    var deptName = data[i].deptName;
                    var deptId = data[i].deptId;
                    var deptRelation = data[i].deptRelation;
                    departCategoryOption += '<option data-deptId ="' + deptId + '" value="' + deptRelation + '">' + deptName + '</option>';
                }
            },
            error: function (jqXHR) {
                console.log("获取承办单位失败");
            }
        });
    }

    // 承办单位的index
    var departIndex = $("#departContent .form-group").length;

    /**
     * 修改事项类型
     */
    function changeCategory(obj) {
        // 下拉框选中的text
        var text = $(obj).find('option:selected').text();
        $('#departContent').empty();
        if (text == null || text == '点击选择') {
            $("#addDepart").css("display", "none");
            return;
        }
        $("#addDepart").css("display", "block");
        // 如果类型是会议纪要,文号必填
        if (text != null && text == '会议纪要') {
            $('#taskNew #referenceNumber').addClass('required');
        } else {
            $('#taskNew #referenceNumber').removeClass('required');
        }
        addDeparts(text);
    }

    /**
     * 增加议点和承办单位
     */
    function addDeparts(text) {
        if (text == null || text == 'undefined' || text == '') {
            text = $('#taskNew #categoryId').find('option:selected').text();
        }
        var remarkStr = 'list[' + departIndex + '].remark';
        var deptStr = 'list[' + departIndex + '].departName';
        var userIdStr = 'list[' + departIndex + '].userId';
        var html;

        if (text != null && text == '会议纪要') {
            html = '<div class="form-group">\n' +
                '<div class="form-group" style="margin:0px 0px 15px ">\n' +
                '    <label class="col-sm-2 control-label no-padding-right" for="' + remarkStr + '"><a style="color: red">*</a>议题内容</label>\n' +
                '    <div class="col-sm-8">\n' +
                '        <textarea type="text" name="' + remarkStr + '" id="' + remarkStr + '" placeholder="议题内容" \n' +
                '               class="form-control required"></textarea>\n' +
                '    </div>\n' +
                '</div>\n' +
                '    <label class="col-sm-2 control-label no-padding-right"><a style="color: red">*</a>承办单位</label>\n' +
                '    <div class="col-sm-2">\n' +
                '        <select class="form-control required" onchange="getChildDepart(this)">\n' + departCategoryOption +
                '        </select>\n' +
                '    </div>\n' +
                '    <div class="col-sm-3">\n' +
                '        <select class="form-control required" name="' + userIdStr + '" id="' + userIdStr + '" onchange="changeDepart(this)">\n' +
                '           <option value="">点击选择</option>\n' +
                '        </select>\n' +
                '        <input type="hidden" name="' + deptStr + '" id="' + deptStr + '" />\n' +
                '    </div>\n' +
                '    <div class="col-sm-1">\n' +
                '        <input type="button" value="删除" class="btn-sm btn-danger" />\n' +
                '    </div>\n' +
                '</div>';
        } else {
            html = '<div class="form-group">\n' +
                '    <label class="col-sm-2 control-label no-padding-right"><a style="color: red">*</a>承办单位</label>\n' +
                '    <div class="col-sm-2">\n' +
                '        <select class="form-control required" onchange="getChildDepart(this)">\n' + departCategoryOption +
                '        </select>\n' +
                '    </div>\n' +
                '    <div class="col-sm-3">\n' +
                '        <select name="' + userIdStr + '" id="' + userIdStr + '" class="form-control required" onchange="changeDepart(this)">\n' +
                '           <option value="">点击选择</option>\n' +
                '        </select>\n' +
                '        <input type="hidden" name="' + deptStr + '" id="' + deptStr + '" />\n' +
                '    </div>\n' +
                '    <div class="col-sm-1">\n' +
                '        <input type="button" value="删除" class="btn-sm btn-danger" />\n' +
                '    </div>\n' +
                '</div>';
        }
        $('#departContent').append(html);
        departIndex++;
    }

    /**
     * 获取单位分类下的所有单位
     */
    function getChildDepart(obj) {
        var deptRelation = $(obj).val();
        if (deptRelation == "/02/161/") {
            var deptid = $("select>option:contains('县领导')").attr("data-deptid");
            $.ajax({
                type: "post",
                url: getUrl("leaderList"),
                data: {
                    deptId: deptid
                },
                dataType: "json",
                success: function (data) {
                    if (data == undefined || data == null) {
                        console.log("获取单位分类下的所有单位为空");
                        return;
                    }
                    // 选到具体单位的下拉框节点
                    var childDepartSelect = $(obj).parent().next().children(".form-control");
                    // 清空下拉框
                    childDepartSelect.empty();
                    var childDepartOption = '<option value="">点击选择</option>';
                    for (var i = 0; i < data.length; i++) {
                        var userName = data[i].userName;
                        var userId = data[i].userId;
                        childDepartOption += '<option value="' + userId + '">' + userName + '</option>';
                    }
                    // 将数据添加到具体单位的下拉框
                    childDepartSelect.append(childDepartOption);
                },
                error: function (jqXHR) {
                    console.log("获取单位分类下的所有单位失败");
                }
            });
        } else {
            $.ajax({
                type: "post",
                url: getUrl("childDeptList"),
                data: {
                    deptRelation: deptRelation
                },
                dataType: "json",
                success: function (data) {
                    if (data == undefined || data == null) {
                        console.log("获取单位分类下的所有单位为空");
                        return;
                    }
                    // 选到具体单位的下拉框节点
                    var childDepartSelect = $(obj).parent().next().children(".form-control");
                    // 清空下拉框
                    childDepartSelect.empty();
                    var childDepartOption = '<option value="">点击选择</option>';
                    for (var i = 0; i < data.length; i++) {
                        var deptName = data[i].deptName;
                        var userId = data[i].userId;
                        childDepartOption += '<option value="' + userId + '">' + deptName + '</option>';
                    }
                    // 将数据添加到具体单位的下拉框
                    childDepartSelect.append(childDepartOption);
                },
                error: function (jqXHR) {
                    console.log("获取单位分类下的所有单位失败");
                }
            });
        }
    }

    /**
     * 修改承办单位,给隐藏框赋值
     */
    function changeDepart(obj) {
        var departName = $(obj).find("option:selected").text();
        if (departName == "点击选择") {
            $(obj).siblings("input").val('');
        } else {
            $(obj).siblings("input").val(departName);
        }
    }

    /**
     * 删除议题和承办单位
     */
    $("#departContent").on("click", ".btn-danger", function () {
        $(this).parent().parent().remove();
    });

    /**
     * 上传附件
     */
    $("#btn-upload").click(function () {
        var fileVal = $("#fileupload").val();
        if (fileVal == null || fileVal == "") {
            alert("未选择任何文件");
            return;
        }
        // 判断文件大小是否大于10M
        var fileSize = $("#fileupload")[0].files[0].size / 1024 / 1024;
        if (fileSize > 10) {
            alert("上传文件大小不能大于10M");
            return;
        }
        $(".shade").fadeIn(100);
        $(".warning").fadeIn(100);
        $('.la-square-jelly-box').show();
        showShade();
        //警告框自定义内容
        $('.warning>.title>em').html('加载中……');
        $.ajaxFileUpload({
            type: "post",
            fileElementId: "fileupload",
            secureuri: false,
            dataType: 'text',
            url: "/filesUpload/uploadBatch",
            // data:fileinfo,
            async: false,
            success: function (data) {
                var data = JSON.parse(data);
                console.log(data);
                var val = data.data.sysid;
                $("#file").attr("value", val);
                if (data.code === "200") {
                    $('.warning>.title>em').html('上传成功');
                } else {
                    $('.warning>.title>em').html('上传失败');
                }
            },
            error: function (data) {
                alert("附件上传失败 ！！请联系管理员");
            }
        });
    });

    /**
     * 抄送领导
     */
    $(document).ready(function () {
        $("#e1").select2({
            placeholder: "抄送领导",
            width: "100%",
            closeOnSelect: false,
            allowClear: true,
        });
    });
    (function () {
        $.ajax({
            type: "post",
            url: getUrl("leaderList"),
            data: {
                deptId: "20190802100000000091"
            },
            dataType: "json",
            success: function (data) {
                if (data == undefined || data == null) {
                    console.log("获取单位分类下的所有单位为空");
                    return;
                }
                var html = ' <option></option>'
                var input = ''
                for (var i = 0; i < data.length; i++) {
                    html += "<option>" + data[i].userName + "</option>"
                    input += "<input type='hidden' value='" + data[i].userId + "' name='copeIdList[" + i + "].countyLeaderId'>"
                }
                $("#e1").html(html);
                $("#e2").html(input);
            }
        });
    })();
</script>
